/* IMPORTANT NOTICE: NEVER USE PX FOR TEXT! Use rem instead! */
 
/* FONTS */
 
/* Geist */

@font-face { /* Geist */
  font-family: 'Geist';
  src: url('/css/fonts/geist/Geist-VariableFont_wght.woff2') format('woff2'),
  url('/css/fonts/geist/Geist-VariableFont_wght.woff') format('woff'),
  url('/css/fonts/geist/Geist-VariableFont_wght.ttf') format('truetype');

  font-weight: 100 900; 
  font-style: normal;
}

@font-face { /* Geist | Italic */
  font-family: 'Geist';
  src: url('/css/fonts/geist/Geist-Italic-VariableFont_wght.woff2') format('woff2'),
  url('/css/fonts/geist/Geist-Italic-VariableFont_wght.woff') format('woff'),
  url('/css/fonts/geist/Geist-Italic-VariableFont_wght.ttf') format('truetype');  

  font-weight: 100 900; 
  font-style: italic;
}

/* ====================================================================================================================== */

/* Default HTML */

body {
  display: flex;
  justify-content: center; 

  font-family: 'Geist', Helvetica, sans-serif;
  color: white;

  background-color: #1e101aff;
}

p, h1, h2, h3, h4, h5, h6 {
  font-family: 'Geist', Helvetica, sans-serif;
}

p {
  font-weight: normal;
  font-style: normal;
  color: white;
}

h1 {
  font-weight: bold;
  text-align: center;
}

a:link {
  color: dodgerblue;
}

a:visited {
  color: blueviolet;
}

img {
  max-width: 100%;
  height: auto;
}

pre {
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* General classes */

.main {
  display: flex;
  flex-direction: column;
  max-width: 1000px;
  flex-grow: 1;
}

/* Grid containers */
.grid {
  display: grid;
  
  grid-template-columns: repeat(var(--numCols, 3), 1fr);

  gap: 10px;
}

/* Flexbox containers */

.flex-grid {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.flex-row {
  display: flex;
  flex-direction: row;
}

.flex-column {
  display: flex;
  flex-direction: column;
}

.flex-column-center {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 0;               
}

.header-row {
  display: flex;
  flex-direction: row;
  justify-content: space-between !important; 
  align-items: center !important;
}

/* Site button */

.site-button,
.site-button img {
  max-width: 88px;
  max-height: 31px;
}

/* Buttons */

button {
  font-family: 'Geist', Helvetica, sans-serif;

  display: inline-block;
  width: 100%;
  cursor: pointer;

  padding: 0.5em;

  color: black;
  font-size: 1.5rem;
  text-align: center;
  text-decoration: none;

  border-radius: 10px;
  border-color:  black;
  border-width: 5px;
}

@media screen and (max-width: 600px) {
  button {
    font-size: 1rem;
    padding: .5em .25em;
  }
}

.button1 {
  background-color: #ff9955; 
  color: black; 
  border: 0.5em solid #0044aa;
}

.button1:hover {
  background-color: #0044aa;
  color: white;
}

.button2 {
  background-color: #ff9955; 
  color: black; 
  border: 0.5em solid #000000;
}

.button2:hover {
  background-color: #000000;
  color: white;
}

/* Thumbnail image */

.site-thumbnail {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

.site-thumbnail-span {
  position: fixed;
  top: 0;
  left: 0;
  padding: 0;
  margin: 0;
  background-color: black;
}